<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
		<style>
			.box {
				width: 600px;
				height: 200px;
				border: 1px solid royalblue;
				overflow: hidden;
				margin:50px auto;
			}
			li{
				width: 200%;
				list-style: none;
				float: left;
			}

			.box img {
				height: 200px;
				animation: go 8s linear infinite;
			}
			
			@keyframes go{
				from{
					transform: translate(0px);
				}
				
				to{
					transform: translate(-600px);
				}
			}
			.img{
				margin: 30px;
				animation: star 3s linear infinite;
			}
			@keyframes star{
				0%{
					transform: scale(1) rotate(0deg);
				}
				50%{
					transform:scale(1.2) rotate(180deg);
				}
				100%{
					transform:scale(1) rotate(360deg);
				}
			}
		</style>
	</head>
	<body>
		<div id="app">
			<img class="img" src="img/star.png" />
			<div class="box">
				<li>
					<img v-for="item in imglist" :src="item" />
				</li>
			</div>
		</div>

		<script>
			var vm = new Vue({
				el: '#app',
				data: {
					imglist:[
						"img/1.png",
						"img/2.png",
						"img/3.png",
						"img/1.png",
						"img/2.png",
						"img/3.png",
					]
				},
				mounted() {
				},
				methods: {
				}
			})
		</script>
	</body>
</html>
